<template>
	<view class="content">
		<!-- F1：自定义标题栏 -->
		<!-- F2：顶部的Banner图 -->
		<!-- F3：用户的消息列表 -->
		<uni-list>
			<!-- 列表中的一个消息 -->
			<uni-list-item class="list-item" v-for="(m,i) in msgList" :key="i">
				<!-- 列表项头部插槽：用户头像 -->
				<template v-slot:header>
					<image class="avatar" :src="base+m.avatar" mode="widthFix"/>
				</template>
				<!-- 列表项主体插槽：消息内容 -->
				<template v-slot:body>
					<view class="msg">
						<!-- 消息详细部分1：标题 -->
						<view class="msg-header">
							<text class="uname">{{m.uname}}</text>
							<text class="loc">{{m.location}}</text>
						</view>
						<!-- 消息详细部分2：文字内容 		-->
						<text class="msg-content">{{m.content}}</text>
						<!-- 消息详细部分3：图片列表 -->
						<view class="msg-pic-list">
							<image v-for="(p,j) in m.picList" :key="j" :src="base+p.url" mode="aspectFill"/>
						</view>
						<!-- 消息详细部分4：底部图标组 -->
						<view class="msg-footer">
							<text class="time">{{m.pubTime}}</text>
							<uni-icons type="heart-filled"/>
							<uni-icons type="chat"/>
							<uni-icons type="redo-filled"/>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- F4：列表底部的“加载提示”组件 -->
		<!-- <uni-load-more status="more" /> -->
		<!-- <uni-load-more status="loading"/> -->
		<!-- <uni-load-more status="noMore"/> -->
		<uni-load-more :status="isLoading ? 'loading' : (pageNum<pageCount ? 'more' : 'noMore')"/>
	</view>
</template>

<script>
	import { chatQuery,base } from '@/service'
	export default {
		data() {
			return {
				base,  //把导入的局部变量上升为模型数据
				/*分页查询必需的五个变量*/
				kw: '',					//待搜索的数据必需包含的关键字
				msgList: [],		//查询到的所有消息
				pageNum: 0,			//当前加载到哪一页了，注意此处的初始值
				pageCount: 99999,	//可供加载的数据总页数，此处的初始值必需大于0
				isLoading: false,	//当前正在加载数据吗？
			}
		},
		onLoad(){
			/*调用情形1：页面加载完成时*/
			this.loadNextPageData()
		},
		onReachBottom(){ //页面事件 & 页面生命周期方法
			/*调用情形2：页面滚动到底部*/
			this.loadNextPageData()
		},
		onPullDownRefresh(){
			/*调用情形3：页面在顶部下拉刷新*/
			//清除已加载的所有数据
			this.msgList = []		//已加载到数据清空
			this.pageNum = 0		//已加载到的页号置为0
			this.pageCount = 99999 //数据总页数置为大数
			this.loadNextPageData()
		},
		methods: {
			/*分页查询必需的一个方法*/
			async loadNextPageData(){
				//1.如果当前正在加载中，或者当前已经没有更多数据了，则退出
				if(this.isLoading || this.pageNum>=this.pageCount){
					return
				}
				//2.设置正在加载中为true
				this.isLoading = true
				//3.异步请求服务器端数据，把得到的数据放入消息数组
				let {pageCount, pageNum, data} = await chatQuery(this.pageNum+1)
				console.log('加载到第', pageNum, '页数据：', data)
				this.pageCount = pageCount
				//PC端做法：新数据到来后，会覆盖之前已经加载的数据
				this.pageNum = pageNum
				//this.msgList = data		
				//移动端做法：新数据到来后，应该“拼接”在之前已经加载的数据后面
				this.msgList = this.msgList.concat(data)
				//this.msgList = [...this.msgList, ...data]
				//4.设置正在加载中为false
				this.isLoading = false
				//5.停止页面顶部的下拉刷新动画（如果存在的话）
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style scoped lang="scss">
.list-item {
	border-top: 6px solid $uni-bg-color-hover;
}
.avatar {
	width: 90rpx; //宽度
	flex-shrink: 0;//弹性容器中的子元素尺寸收缩权重：0
	margin-right: $uni-spacing-row-base;//右外间距
}
.msg {
	flex-direction: column;//弹性容器主轴方向：纵向
	flex: 1;//尺寸增长权重：1
	.msg-header {
		justify-content: space-between;//子元素在主轴方向对齐：两端对齐
		.uname {
			font-size: $uni-font-size-base;
		}
		.loc {
			font-size: $uni-font-size-sm;
			color: $uni-color-subtitle;
		}
	}
	.msg-content {
		font-size: $uni-font-size-base;//字体大小
		padding: $uni-spacing-col-base  0;//上下方向上的内边距
	}
	.msg-pic-list {
		flex-wrap: wrap;//弹性容器允许子元素换行
		width: 100%;//宽度
		image {
			width: 182rpx;
			height: 150rpx;
			margin: 0 $uni-spacing-row-sm $uni-spacing-col-sm 0;
		}
	}
	.msg-footer {
		.time {
			flex: 1;//弹性增长权重：1
			font-size: $uni-font-size-sm;
		}
	}
}
</style>
